<template>
  <view
    v-if="order"
    class="bgff radius12 pdl50 pdr50 pdt50 box-b relative mgb20"
  >
    <view class="absolute right0 top43">
      <status-item :title="order.checkstatusStr" :className="order.className" :colorName="order.colorName"></status-item>
    </view>

    <view class="pdb36 box-b">
      <view class="mgt10">
        <view class="flex-align">
<!--          <view v-if="order.showPoint" class="img12 background-sub radius50p mgr10"></view>-->
          <view class="lh36 fs36 fw600 color1a ell">
            {{ order.catelogname || '报修产品' }}
          </view>
        </view>
        <view class="lh28 fs24 ell mgt14 color4d">
          {{ order.productname }}
        </view>
      </view>
      <view class="flex-align lh24 fs24 mgt36">
        <view class="fs24 color1a minw108">报修日期</view>
        <view class="fs24 ell mgl18 color4d">
          {{ order.submittime }}
        </view>
      </view>
      <view class="flex-align lh24 fs24 mgt12">
        <view class="fs24 color1a minw108">工单编号</view>
        <view class="fs24 ell mgl18 color4d">
          {{ order.orderid }}
        </view>
      </view>
      <view
        v-if="[0].includes(order.checkstatus)"
        class="flex-align lh24 fs24 mgt12">
        <view class="fs24 color1a minw108">寄修单号</view>
        <view class="fs24 ell mgl18 color4d">
          {{ order.repairno || '' }}
        </view>
      </view>
      <view
        v-if="[6].includes(order.checkstatus)"
        class="flex-align lh24 fs24 mgt12">
        <view class="fs24 color1a minw108">完结单号</view>
        <view class="fs24 ell mgl18 color4d">
          {{ order.completeno || '' }}
        </view>
      </view>
      <view class="flex-start lh24 fs24 mgt12">
        <view class="fs24 color1a minw108">故障描述</view>
        <view class="fs24 zhedie mgl18 color4d">
          {{ order.faulttxt }}
        </view>
      </view>
    </view>

    <view
      v-if="[0,1,2,3,4,6,7].includes(order.checkstatus)"
      class="pd2800 box-b bdtd9 between-box">
      <view>
        <view
          v-if="[2].includes(order.checkstatus)"
          class="flex-align sub-color">
          <view class="fs36 fw500">
            {{order.fee || 0}}
          </view>
          <view class="fs24 mgl4 mgt6">
            元
          </view>
        </view>
      </view>
      <view
        class="flex jsend"
      >
        <c-botton
          v-if="[0].includes(order.checkstatus)"
          name="撤回"
          @click="api_func_cancelOrder(order.orderid)">
        </c-botton>
        <c-botton
          v-if="[0].includes(order.checkstatus)"
          name="修改"
          @click="toPage(
          '/pages/product/repair-report/repair-report-detail?orderid=' +
            order.orderid +
            '&checkstatus=' +
            order.checkstatus +
            '&checkstatusStr=' +
            order.checkstatusStr +
            '&className=' +
            order.className,
          true
        )">
        </c-botton>
        <c-botton
          v-if="[1,2,3,4,6].includes(order.checkstatus)"
          name="查看"
          @click="toPage(
          '/pages/product/repair-report/repair-report-detail?orderid=' +
            order.orderid +
            '&checkstatus=' +
            order.checkstatus +
            '&checkstatusStr=' +
            order.checkstatusStr +
            '&className=' +
            order.className,
          true
        )">
        </c-botton>
        <c-botton
          v-if="[7].includes(order.checkstatus)"
          name="查看"
          class-name="btn-close radius23 pd034 flex-box fs24 minh46 lh26 tac ffmi mgl16 bdd9 colord9">
        </c-botton>
        <c-botton
          v-if="[2].includes(order.checkstatus)"
          name="支付"
          class-name="btn-close radius23 pd034 flex-box fs24 minh46 lh26 tac ffmi mgl16 background-sub white"
          @click="toPayment(order)">
        </c-botton>
<!--        <c-botton-->
<!--          v-if="[4].includes(order.checkstatus)"-->
<!--          name="查物流"-->
<!--          @click="toLogistics(order)">-->
<!--        </c-botton>-->
<!--        <c-botton-->
<!--          v-if="[4].includes(order.checkstatus)"-->
<!--          name="签收"-->
<!--          @click="signFor(order.orderid)">-->
<!--        </c-botton>-->
        <c-botton
          v-if="[0,1].includes(order.checkstatus)"
          name="录快递"
          @click="recordExpressDelivery(order)">
        </c-botton>
      </view>
    </view>

  </view>
</template>

<script>
import statusItem from '@/components/status-item';

export default {
  name: 'repair-item', // 报修组件
  components: {
    statusItem,
  },
  props: {
    order: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    api_func_cancelOrder(orderid) {
      uni.showModal({
        title: '提示',
        content: '确定撤回吗',
        success: (res) => {
          if (res.confirm) {
            this.$emit('api_func_cancelOrder',orderid)
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    recordExpressDelivery(orderid){
      this.$emit('recordExpressDelivery','expressDelivery',orderid)
    },
    signFor(orderid){
      uni.showModal({
        title: '提示',
        content: '确定要签收吗',
        success: (res) => {
          if (res.confirm) {
            this.$emit('signFor',orderid)
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    toLogistics(order){
      this.$emit('toLogistics',order)
    },
    toPayment(order){
      this.$emit('toPayment','payment',order)
    },

  },
};
</script>

<style lang="less" scoped></style>
